<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>在线用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/user.css" media="all" />
    <link rel="stylesheet" href="/css/search.css" media="all" />
    <!--font-awesome-->
    <link href="/plugns/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_0zq2yro0cfn.css">
    <style>
        .detail-body{
            margin: 20px 0 0;
            color: #333;
            word-wrap: break-word;
        }
    </style>
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field">
        <legend>在线用户检索</legend>
        <div class="layui-field-box">
            <form class="layui-form">
                <div class="layui-inline" style="margin-left: 15px">
                    <label>登录名称:</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" name="s_loginName" placeholder="请输入" class="layui-input search_input">
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 15px">
                    <label>登录地点:</label>
                    <div class="layui-input-inline">
                        <input type="text" value="" name="s_loginLocation" placeholder="请输入地点" class="layui-input search_input">
                    </div>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn" lay-submit="" lay-filter="searchForm"><i class="iconfont icon-sousuo2"></i>查询</a>
                </div>
                <div class="layui-inline" >
                    <button type="reset" class="layui-btn layui-btn-primary"><i class="iconfont icon-zhongzhi"></i>重置</button>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger batchForce" ><i class="fa fa-sign-out"></i>批量强退</a>
                </div>
            </form>
        </div>
</fieldset>
<div class="layui-form users_list">
    <table class="layui-table" id="test" lay-filter="demo"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="quit"><i class="fa fa-sign-out"></i>强退</a>
    </script>
</div>
<div id="page" style="text-align: center;"></div>

<!-- 状态列 -->
<script type="text/html" id="state">
    {{# if(d.status == 'on_line'){ }}
    <span>在线</span>
    {{# }else{ }}
    <span>离线</span>
    {{# } }}
</script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/tools.js"></script>
<script type="text/javascript"  th:inline="none">
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['layer','form','table','laypage','common'], function() {
        var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                table = layui.table,
            laypage=layui.laypage,
            common=layui.common,
                t,changeIndex;                  //表格数据变量

        t = {
            elem: '#test',
            url:'findList',
            method:'get',
            id:'testReload',
            page:false,
            width: $(parent.window).width()-223,
            cols: [[
                {type:'checkbox'},
                {field:'sessionId',      title: 'sessionId'},
                {field:'loginName',     title: '登录账号'},
                {field:'ipAddr',     title: '登录ip地址'},
                {field:'loginLocation',    title: '登录地点'},
                {field:'browser',    title: '浏览器'},
                {field:'os',    title: '操作系统'},
                {field:'status',title: '状态',style:'background-color: #009688; color: #fff;',templet:'#state'},
                {field:'startTimestamp',  title: '登陆时间',width:'15%',templet:'<div>{{ layui.laytpl.toDateString(d.startTimestamp) }}</div>',unresize: true}, //单元格内容水平居中
                {field:'lastAccessTime',  title: '最后访问时间',width:'15%',templet:'<div>{{ layui.laytpl.toDateString(d.lastAccessTime) }}</div>',unresize: true}, //单元格内容水平居中
                {fixed: 'right', title: '操作',   width: '30%', align: 'center',toolbar: '#barDemo'}
            ]],
            done: function(res, curr, count){
                //pages=res.page;
                counts=res.count;
                //完整功能
                laypage.render({
                    elem: 'page'
                    ,count: counts,
                    first: '首页',
                    last: '尾页'
                    ,layout: ['count', 'prev', 'page', 'next',  'refresh', 'skip']
                    ,theme: '#00A0E9'
                    ,curr: curr
                    ,skip: true
                    ,jump: function(obj,first){
                        curr = obj.curr;

                        if(!first){
                            getData(obj.curr,obj.limit)
                        }
                    }
                });

            }
        };
        table.render(t);
        function getData(page,limit){
            $.ajax({
                type: 'post',
                url: 'list?page='+page+"&limit="+limit,
                async: false,
                success: function (data) {
                    $(".layui-laypage-btn").click();
                    table.reload('testReload',{
                        data : data,
                        page:{
                            curr:page
                        }
                    });

                }
            });
        }
        //批量强退
        $(".batchForce").click(function () {
            var checkStatus = table.checkStatus('testReload'),
                data = checkStatus.data,
                sessionIds = [];
            if(data.length === 0){
                layer.msg("请选择数据", {icon: 5});
                return;
            }
            for(var i=0;i<data.length;i++){

                sessionIds.push(data[i].sessionId);
            }
            layer.confirm("你确定要踢出所选中的数据用户吗？", {btn: ['是的,我确定', '我再想想']},
                function () {
                    $.post("batchForceLogout", {"sessionIds": sessionIds}, function (res) {
                        if (res.success) {
                            layer.msg("强制下线成功", {time: 1000}, {icon: 6}, function () {
                                table.reload('testReload', t);
                            });
                        } else {
                            layer.msg(res.message);
                        }

                    });
                }
            )
        })
        //监听工具条
        table.on('tool(demo)', function(obj) {
            var data = obj.data;
            if (obj.event === "quit") {
                layer.confirm("你确定要踢出该用户吗？", {btn: ['是的,我确定', '我再想想']},
                    function () {
                        $.post("forceLogout", {"sessionId": data.sessionId}, function (res) {
                            if (res.success) {
                                layer.msg("强制下线成功", {time: 1000}, function () {
                                    table.reload('testReload', t);
                                });
                            } else {
                                layer.msg(res.message);
                            }

                        });
                    }
                )
            }
        });
        //搜索
        form.on("submit(searchForm)",function(data){
            t.where = data.field;
            table.reload('testReload', t);
            return false;
        });
    });
</script>
</body>
</html>